<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App',
  }
</script>
<style lang="less">
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-width: 1280px;
    background-color: #F0F2F5;
  }

  /*全局块*/
  .blockMould {
    background-color: #FFFFFF;
    padding: 20px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
  }

  /*全局提示框统一样式 */
  .el-tooltip__popper{
    background-color:#fff !important;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8) !important;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
    border-radius: 4px;
  }

  .el-tooltip__popper[x-placement^="top"] .popper__arrow {
    border-top-color: #fff;
  }
  .el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
    border-top-color: #fff;
  }

  .el-tooltip__popper[x-placement^="top"] .popper__arrow:before{
    content:'';
    border-top:6px solid rgba(0, 0, 0, 0.03);
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    position:absolute;
    left:-6px;
    top:-5px;
  }

  .el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
    border-bottom-color: #fff;
  }
  .el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {
    border-bottom-color: #fff;
  }

  .el-tooltip__popper[x-placement^="bottom"] .popper__arrow:before{
    content:'';
    border-bottom:6px solid rgba(0, 0, 0, 0.03);
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    position:absolute;
    left:0px;
    top:0px;
  }

  /*导出按钮提示全局统一样式 */
  .export_button_promit{
    background-color:#fff !important;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8) !important;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
    border-radius: 4px;
  }

  .export_button_promit.el-tooltip__popper[x-placement^="top"] .popper__arrow {
    border-top-color: #fff;
  }
  .export_button_promit.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
    border-top-color: #fff;
  }

  .export_button_promit.el-tooltip__popper[x-placement^="top"] .popper__arrow:before{
    content:'';
    border-top:6px solid rgba(0, 0, 0, 0.03);
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    position:absolute;
    left:-6px;
    top:-5px;
  }

  /*列表操作按钮全局统一样式 */
  .operation_button_promit{
    background-color:#fff !important;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8) !important;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
    border-radius: 4px;
    padding:12px 16px;
  }

  .operation_button_promit.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
    border-bottom-color: #fff;
  }
  .operation_button_promit.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {
    border-bottom-color: #fff;
  }

  .operation_button_promit.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:before{
    content:'';
    border-bottom:6px solid rgba(0, 0, 0, 0.03);
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    position:absolute;
    left:0px;
    top:0px;
  }

  /*全局搜索框统一样式 */
  .search{
    background-color:#fff;
    border-radius: 2px;
    padding:24px 16px 24px 44px;
    margin-bottom:16px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    display:flex;
    justify-content:space-between;
    .el-input.el-input--suffix.is-focus>.el-input__inner{
      border-color:#2A82E2;
    }
    .el-input__inner:focus{
      border-color:#2A82E2 !important;
    }
    .el-range-editor.is-active{
      border-color:#2A82E2 !important;
    }
    .left,.center,.right{
      width:100%;
      .search_list{
        display:flex;
        align-items: center;
        .search_text{
          min-width:70px;
        }
      }
      .el-select{
        width:100%;
        .el-input{
          width:100%;
          .el-input__inner{
            width:100%;
            height:32px;
            border-radius: 2px;
            border: 1px solid #DDDFE6;
          }
          .el-input__suffix{
            .el-input__suffix-inner{
              .el-input__icon{
                line-height:32px;
              }
            }
          }
        }
      }
      .el-input{
        width:100%;
        .el-input__inner{
          width:100%;
          height:32px;
          border-radius: 2px;
          border: 1px solid #DDDFE6;
        }
      }
    }
  }

  /*全局列表统一样式 */
  .list{
    padding:24px 16px 1px 16px;
    background-color:#fff;
    margin-bottom:20px;
    border-radius:2px;
    .list_head_button{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:16px;
      .el-button{
        border-radius: 2px;
        height:32px;
        padding:0 18px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }
      .search_button{
        display:flex;
        align-items:center;
        .el-button{
            border: 1px solid #2A82E2;
            background-color:#fff;
            color: #2A82E2;
        }
        .el-button:hover{
          background-color: rgba(42, 130, 226, 0.12);
        }
        .last_update_time{
          font-size:14px;
          color:#C0C4CC;
          margin-left:20px;
        }
      }
      .search_name{
        button:first-child{
            background-color: #2A82E2;
            border-color:transparent;
            color: rgba(255, 255, 255, 0.9);
        }
        button:first-child:hover{
          background-color: rgba(42, 130, 226, 0.7);
        }
        button:first-child:active{
          background-color: #1F6DC3;
        }
        button:last-child{
            border: 1px solid #DDDFE6;
            background-color:#fff;
            color: rgba(0, 0, 0, 0.7);
            margin-left:8px;
        }
        button:last-child:hover{
          color: #2A82E2;
        }
      }
    }

    .el-table{
      border-radius: 2px;
      border: 1px solid #ECEEF5;
      border-bottom:0;
      thead{
        tr{
          th{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
          }
          th:first-child{
            padding-left:23px;
          }
        }
      }
      tbody{
        tr{
          td{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            padding:12px 0 14px 0;
            .cell{
              line-height:15px;
            }
          }
          td:first-child{
            padding-left:41px;
          }
          td:last-child{
            .cell{
              .el-button{
                padding:0;
                height:16px;
              }
              button:last-child{
                margin-left:20px;
              }
            }
          }
        }
      }
    }
  }

  /*全局标题超出3行展示全部 */
  .show_all_title{
    width:400px;
  }

  /*全局标签弹框统一样式 */
  .label_dialog {
    .el-dialog{
      padding:18px 25px 32px 32px;
      .el-dialog__header{
        padding:0;
        .el-dialog__title{
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #202020;
        }
        .el-dialog__headerbtn{
          right:22px;
          .el-dialog__close{
            color:#666666;
          }
        }
      }
      .el-dialog__body{
        padding:28px 0 0;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
        .el-input.el-input--suffix.is-focus>.el-input__inner{
          border-color:#2A82E2;
        }
        .el-input__inner:focus{
          border-color:#2A82E2 !important;
        }
        .el-range-editor.is-active{
          border-color:#2A82E2 !important;
        }
        .el-textarea__inner:focus{
          border-color:#2A82E2 !important;
        }
        .el-select{
          width: 310px;
          .el-input{
            .el-input__inner{
              height: 32px;
              border-radius: 2px;
              border: 1px solid #DDDFE6;
            }
            .el-input__suffix{
              .el-input__suffix-inner{
                .el-input__icon{
                  line-height:32px;
                }
              }
            }
          }
        }
        .el-input{
          width: 310px;
          .el-input__inner{
            height: 32px;
            border-radius: 2px;
            border: 1px solid #DDDFE6;
          }
        }
        .search_list{
          margin-bottom:16px;
          .search_text{
            width:70px;
          }
        }
        .select_value{
          display:flex;
          .search_text{
            margin-top:8px;
          }
          .el-icon-circle-plus-outline,.el-icon-circle-close{
            margin-left:8px;
            margin-right:0;
            font-size:18px;
          }
        }
      }
      .el-dialog__footer{
        padding: 24px 0 0;
        display:flex;
        justify-content:center;
        .dialog-footer{
          .el-button{
            height: 32px;
            background-color: #FFFFFF;
            border-radius: 2px;
            border: 1px solid #AAAAAA;
            padding:6px 36px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
          }
          button:first-child{
            color: #767676;
          }
          button:first-child:hover{
            color: #2A82E2;
          }
          button:last-child{
            background-color: #2A82E2;
            color: #FFFFFF;
            border-color:transparent;
          }
          button:last-child:hover{
            background-color: rgba(42, 130, 226, 0.7);
          }
          button:last-child:active{
            background-color: #1F6DC3;
          }
        }
      }
      .search_list {
        display: flex;
        margin-bottom: 15px;
        align-items: center;
        .mandatory_logo{
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #F65C44;
          margin-right:4px;
          display:inline-block;
          transform:translateY(3px);
        }
      }
      .search_text {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        width: 15%;
      }
    }
  }

  /*全局活动链接弹框统一样式 */
  .active_link_dialog{
    .el-dialog{
      padding:18px 25px 15px 32px;
      .el-dialog__header{
        padding:0;
        .el-dialog__title{
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #202020;
        }
        .el-dialog__headerbtn{
          right:22px;
          .el-dialog__close{
            color:#666666;
          }
        }
      }
      .el-dialog__body{
        padding:34px 7px 0 0;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
        .search_list{
          margin-bottom:20px;
          display:flex;
          .search_text{
            width: 10%;
          }
          .search_value{
            width:90%;
            margin-left:12px;
          }
        }
        .link_url{
          align-items:center;
          .search_text{
            width:57px;
          }
          .el-input{
            width: 322px;
            margin-right:8px;
            .el-input__inner{
              width:100%;
              height: 32px;
              background-color: #F7F8FA;
              border-radius: 2px;
              border: 1px solid #DDDFE6;
            }
          }
          .el-button{
            height: 32px;
            background-color: #2A82E2;
            border-radius: 2px;
            border-color:transparent;
            display:flex;
            justify-content:center;
            align-items:center;
            padding:7px 11px;
            box-sizing:border-box;
          }
          .el-button:hover{
            background-color: rgba(42, 130, 226, 0.7);
          }
          .el-button:active{
            background-color: #1F6DC3;
          }
        }
        .qrcode{
          margin-bottom:6px;
          .search_text{
            width:56px;
            padding-top:6px;
            display:inline-block;
          }
          .qr_code{
            width: 110px;
            height: 110px;
            background-color: #FFFFFF;
            box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.17);
            border-radius: 2px;
            display:flex;
            justify-content:center;
            align-items:center;
          }
        }
      }
      .el-dialog__footer{
        padding:0;
        color:#2A82E2;
        font-size:13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        display:flex;
        justify-content:center;
        height: 18px;
      }
    }
  }

  /*运营活动管理模块新增/编辑页面统一样式 */
  .add_edit{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    .el-input.el-input--suffix.is-focus>.el-input__inner{
      border-color:#2A82E2 !important;
    }
    .el-input__inner:focus{
      border-color:#2A82E2 !important;
    }
    .el-range-editor.is-active{
      border-color:#2A82E2 !important;
    }
    .el-textarea__inner:focus{
      border-color:#2A82E2 !important;
    }
    .mandatory_logo{
      color: #F65C44;
      margin-right:4px;
      display:inline-block;
      transform:translateY(3px);
    }
    .add_field,.content,.image{
      background-color: #FFFFFF;
      border-radius: 2px;
    }
    .add_field,.content{
      margin-bottom:16px;
    }
    .add_field{
      padding:24px 276px 5px 32px;
      box-sizing:border-box;
      .field_list{
        margin-bottom:20px;
        width:100%;
        .search_text{
          display:inline-block;
          margin-bottom:7px;
        }
        .el-input{
          .el-input__inner{
            height: 32px;
            background-color: #FFFFFF;
            border-radius: 2px;
            border: 1px solid #DDDFE6;
          }
        }
      }
      .product_info{
        display:flex;
        justify-content:space-between;
        .project{
          margin-right:20px;
          width:50%;
          .el-select{
            display:block;
            .el-input__suffix{
              .el-input__suffix-inner{
                .el-input__icon{
                  line-height:32px;
                }
              }
            }
          }
        }
      }
      .desc{
        .el-textarea{
          .el-textarea__inner{
            resize:none;
            height: 32px;
            border-radius: 2px;
            border: 1px solid #DDDFE6;
          }
          .el-input__count{
            bottom:9px;
          }
        }
      }
    }
    .content{
      padding:21px 276px 24px 22px;
      box-sizing:border-box;
      .text{
        margin-bottom:13px;
      }
      .article_content{
        margin-left:10px;
        width:100%;
      }
    }
    .image{
      padding:24px 0 5px 32px;
      box-sizing:border-box;
      .search_text{
        display:inline-block;
        margin-bottom:14px;
      }
      .promit{
        margin-right:5px;
        transform:translateY(1.5px);
      }
      .upload_promit{
        font-size: 12px;
        color: #C0C4CC;
      }
      .el-form{
        .el-form-item{
          .el-form-item__content{
            line-height:0;
            .el-upload-list{
              li{
                margin:0;
                width:160px;
                height:160px;
                border-radius: 2px;
                margin-right:10px;
                .el-upload-list__item-status-label{
                  display:none;
                }
              }
            }
            .el-upload{
              background-color:#fff;
              width: 160px;
              height: 160px;
              border-radius: 2px;
              border: 1px dashed #DDDFE6;
              display: inline-flex;
              justify-content: center;
              align-items: center;
              .el-icon-plus{
                width: 56px;
                height: 56px;
                font-size:50px;
                color: #D8D8D8;
              }
            }
          }
        }
      }
    }
    .submit_btn{
      .el-button{
        height: 40px;
        border-radius: 2px;
        padding:10px 66px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        margin:20px 0;
        box-sizing:border-box;
      }
      button:first-child{
        border: 1px solid #AAAAAA;
        color: #767676;
        background-color:#fff;
        margin-right:20px;
      }
      button:first-child:hover{
        color: #2A82E2;
      }
      button:last-child{
        background-color: #2A82E2;
        color:#fff;
        border-color:transparent;
      }
      button:last-child:hover{
        background-color: rgba(42, 130, 226, 0.7);
      }
      button:last-child:active{
        background-color: #1F6DC3;
      }
    }
    .el-dialog{
      width: 420px;
      height: 139px;
      background-color: #FFFFFF;
      border-radius: 2px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      padding:12px 19px 16px 16px;
      box-sizing:border-box;
      margin-top:41vh !important;
      .el-dialog__header,.el-dialog__body,.el-dialog__footer{
        padding:0;
      }
      .el-dialog__header{
        margin-bottom:16px;
        .el-dialog__title{
          color: #333333;
          font-size: 18px;
        }
        .el-dialog__headerbtn{
          .el-dialog__close{
            color: #9C9C9C;
            font-size: 16px;
          }
        }
      }
      .el-dialog__body{
        font-size: 14px;
        color: #919398;
        margin-bottom:18px;
      }
      .el-dialog__footer{
        .dialog-footer{
          .el-button{
            height: 32px;
            border-radius: 2px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            padding:6px 23px;
            box-sizing:border-box;
          }
          button:first-child{
            border: 1px solid #DDDFE6;
            color: rgba(0, 0, 0, 0.7);
            background-color:#fff;
          }
          button:first-child:hover{
            color: #2A82E2;
          }
          button:last-child{
            background-color: #2A82E2;
            border-color:transparent;
            color:#fff;
          }
          button:last-child:hover{
            background-color: rgba(42, 130, 226, 0.7);
          }
          button:last-child:active{
            background-color: #1F6DC3;
          }
        }
      }
    }
  }
</style>
